<template>
	<view>

		<u-popup v-model="calendarShow" mode="center" border-radius="20" z-index='9999999'>
			<view class="tiemBox">
				<!-- 顶部 -->
				<view class="calendar-header">
					<view class="monthBtn" @click="daysPre">
						上一月
					</view>
					<view class="monthCon" @click="yearMonthClick">
						<text>{{currentYear}}-{{currentMonth}}</text>
						<u-icon name="arrow-down-fill" color="#327FE8" size="32"></u-icon>
					</view>
					<view class="monthBtn" @click="daysNext">
						下一月
					</view>
				</view>

				<!-- 周 -->
				<view class="calendar-weeks">
					<view class="calendar-week" v-for="(week, index) in weeks" :key="index">
						{{week}}
					</view>
				</view>

				<!-- 日历 -->
				<view class="calendar-content">
					<view class="calendar-days">
						<view class="calendar-day" v-for="(item,index) in days" :key="index" :class="{
									'day-hidden': !item.show
								}" @click="clickItem(item)">
							<button hover-class="none" class="date" :class="[
										item.selected == true ? 'is-checked' : '',
										item.isToday ? 'is-today' : '',
										]" :disabled="item.disabled">
								{{item.isToday ? '今' : item.time.getDate()}}
							</button>
						</view>
					</view>
				</view>

				<!-- 操作 -->
				<view class="calendar-post" v-if="type=='multi'">
					<view class="submitBtn" @click="calendarConfirm">确定</view>
				</view>
			
			</view>
		</u-popup>

		<!-- 选择年月弹窗 -->
		<u-popup v-model="yearMonthShow" mode="center" border-radius="20" safe-area-inset-bottom closeable>
			<view class="yearMonth_box">
				<view class="yearMonth_head">
					<u-section title="选择年月" font-size="32" line-color="#4da199" :right="false"></u-section>
				</view>
				<view class="yearList_con">
					<u-tabs :show-bar="false" active-color="#4da199" :list="yearList" :current="yearIndex" height="100" font-size="32"
						@change="yearChange">
					</u-tabs>
				</view>
				<view class="monthList_con">
					<view class="monthItem" :class="monthIndex == index ? 'active':''" v-for="(item,index) in monthList"
						:key="index" @click="monthClick(index)">
						{{item.name}}
					</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import {
		gegerateDates,
		dateEqual,
		formatDate
	} from '@/util/generateDates.js';
	export default {
		props: {
			// 选择类型：单选single、多选multi
			type: {
				type: String,
				default: 'single'
			},
		},
		data() {
			return {
				weeks: ['一', '二', '三', '四', '五', '六', '日'],
				current: 1,
				currentYear: '',
				currentMonth: '',
				currentDate: '',

				// 选择的日期
				selectedDate: formatDate(new Date(), 'yyyy-MM-dd'), //默认今天

				// 生成日期数据
				days: [],

				// 日历弹窗
				calendarShow: false,

				// 年月弹窗
				yearMonthShow: false,
				yearList: JSON.parse(uni.getStorageSync('yearList')),
				monthList: JSON.parse(uni.getStorageSync('monthList')),

				yearIndex: 0,
				monthIndex: 0,
			};
		},
		created() {
			var _this = this;
			_this.initDate();
		},
		mounted() {},
		watch: {},
		methods: {
			/**
			 * 日历 start
			 */
			// 选择年
			yearChange(index) {
				// console.log("==年索引==");
				// console.log(index);
				var _this = this;
				_this.yearIndex = index;
				_this.monthIndex = '-1';
			},

			// 选择月
			monthClick(index) {
				// console.log("==月索引==");
				// console.log(index);
				var _this = this;
				_this.monthIndex = index;
				_this.yearMonthShow = false;

				var currentYear = parseInt(_this.yearList[_this.yearIndex].year);
				var currentMonth = parseInt(_this.monthList[_this.monthIndex].month);

				console.log("==选择的年月==");
				console.log(currentYear, currentMonth)
				const d = new Date(currentYear, currentMonth - 1, 1);
				// console.log(d);

				// 初始化日历
				_this.initDate(d);
			},

			// 选择年月
			yearMonthClick() {
				this.yearMonthShow = true;
			},

			// 初始化日历的方法
			initDate(cur) {
				// console.log(cur)
				var _this = this;
				let date = '';
				if (cur) {
					date = new Date(cur)
				} else {
					date = new Date()
				}
				_this.currentDate = date.getDate() // 今日日期 几号
				_this.currentYear = date.getFullYear() // 当前年份
				var currentMonth = date.getMonth() + 1 // 当前月份
				_this.currentMonth = currentMonth > 9 ? currentMonth : '0' + currentMonth; // 月份补0
				_this.currentWeek = date.getDay() === 0 ? 7 : date.getDay() // 1...6,0   // 星期几
				const nowY = new Date().getFullYear() // 当前年份
				const nowM = new Date().getMonth() + 1
				const nowD = new Date().getDate() // 今日日期 几号
				console.log("==日历组件初始化参数==")
				console.log(_this.currentYear + '-' + _this.currentMonth + '-' + _this.currentDate)

				let days = [];
				days = gegerateDates(date, 'month');
				for (var i = 0; i < days.length; i++) {
					days[i].selected = false;
				}
				// console.log(days)
				_this.days = days;

				//  派发事件,时间发生改变
				let obj = {
					start: '',
					end: ''
				};
				const start = new Date(_this.currentYear, _this.currentMonth - 1, 1);
				const end = new Date(_this.currentYear, _this.currentMonth, 0);
				obj.start = start;
				obj.end = end;
				_this.$emit('days-change', obj);

				// 更新选中年
				for (var i = 0; i < _this.yearList.length; i++) {
					if (_this.yearList[i].year == _this.currentYear) {
						_this.yearIndex = i;
					}
				}

				// 更新选中月
				for (var i = 0; i < _this.monthList.length; i++) {
					if (_this.monthList[i].month == _this.currentMonth) {
						_this.monthIndex = i;
					}
				}
			},

			// 左右滑动
			changeSwp(e) {
				// console.log(e);
				const pre = this.current;
				const current = e.target.current;
				/* 根据前一个减去目前的值我们可以判断是下一个月/周还是上一个月/周 
				 * current - pre === 1, -2时是下一个月/周
				 * current - pre === -1, 2时是上一个月/周
				 */
				this.current = current;
				if (current - pre === 1 || current - pre === -2) {
					this.daysNext();
				} else {
					this.daysPre();
				}
			},

			// 上一个
			daysPre() {
				const d = new Date(this.currentYear, this.currentMonth - 2, 1);
				this.initDate(d);
			},

			// 下一个
			daysNext() {
				const d = new Date(this.currentYear, this.currentMonth, 1);
				this.initDate(d);
			},

			// 点击日期
			clickItem(e) {
				var _this = this;
				var date = e.fullDate;
				var days = _this.days;

				// 多选
				if (_this.type == 'multi') {
					for (var i = 0; i < days.length; i++) {
						if (days[i].fullDate == date) {
							days[i].selected = !days[i].selected;
						}
					}
				}

				// 单选
				if (_this.type == 'single') {
					for (var i = 0; i < days.length; i++) {
						days[i].selected = false; //清空选中
						if (days[i].fullDate == date) {
							days[i].selected = true;
						}
					}
					_this.calendarShow = false;
					_this.$emit('selected-change', date);
				}

				_this.days = days;
			},

			// 点击确定
			calendarConfirm() {
				var _this = this;
				_this.calendarShow = false;

				var days = _this.days;
				var dateArray = [];
				for (var i = 0; i < days.length; i++) {
					if (days[i].selected == true) {
						dateArray.push(days[i].fullDate);
					}
				}
				var dateStr = dateArray.join(',');
				_this.$emit('selected-change', dateStr);
			},
		},
	}
</script>

<style scoped lang="scss">
	.tiemBox{
		width: 690rpx;
		margin: 0 auto;
	}
	/* 顶部 */
	.calendar-header {
		padding: 0 60rpx;
		height: 82rpx;
		line-height: 82rpx;
		background-size: cover;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.monthCon {
		width: 306rpx;
		height: 82rpx;
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
		color:$uni-color-active;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.monthCon text {
		margin-right: 5rpx;
	}

	.monthBtn {
		font-size: 28rpx;
		color: #000;
	}

	/* 周 */
	.calendar-weeks {
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		justify-content: center;
		align-items: center;
		display: flex;
		flex-wrap: wrap;
	}

	.calendar-week {
		width: calc(100% / 7);
		height: 100%;
		text-align: center;
		font-size: 30rpx;
		color: #666;
	}

	/* 日历 */
	.calendar-content {}

	.calendar-days {
		width: 100%;
		height: 100%;
		overflow: hidden;
		display: flex;
		flex-wrap: wrap;
	}

	.calendar-day {
		width: calc(100% / 7);
		height: 70rpx;
		text-align: center;
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: center;
	}

	.day-hidden {
		visibility: hidden;
	}

	/* 选中style */
	.date {
		width: 60rpx;
		height: 60rpx;
		line-height: 58rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #000;
		text-align: center;
		border: 1rpx solid #fff;
		border-radius: 10rpx;
		box-sizing: border-box;
		overflow: hidden;
		margin: 0 auto;
		position: relative;
	}

	.date[disabled] {
		color: #ccc;
		background: transparent;
	}

	.is-today {
		color: $uni-color-active;
		border: 2rpx solid #4da199;
		background: $uni-bg;
	}

	.is-checked {
		border: 1rpx solid #4da199;
		background: $uni-bg;
	}

	// 操作
	.calendar-post {
		padding: 0 30rpx 30rpx;
	}

	/**
	 * 选择年月弹窗
	 */
	.yearMonth_box {
		width: 690rpx;
		margin: 0 auto;
	}

	.yearMonth_head {
		padding: 30rpx 30rpx 0;
	}

	.yearMonth_box .yearList_con {
		border-bottom: 1rpx solid #dcdcdc;
		overflow: hidden
	}

	.yearMonth_box .monthList_con {
		padding: 30rpx;
		overflow: hidden;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
	}

	.yearMonth_box .monthItem {
		width: 160rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 28rpx;
		color: #333;
		background-color: $uni-bg;
		border-radius: 10rpx;
		margin-bottom: 30rpx;
	}

	.yearMonth_box .monthItem.active {
		color: #000;
		background: $uni-bg-active;
	}
</style>
